<!--消息 -->
<!-- 聊天正常未读消息数量不正常;但不影响使用 
相比上个版本：此版本优化了
1、加宽了聊天列表
2、优化了断网状态下提醒
此页面作废：20241024
作废原因：如下
1、将输入框改为富文本编辑器
2、去掉@paste="handlePaste"方法；（vue复制粘贴图片功能）[此版本有]
-->
<template>
	<div class="contact flex" id="information">
		<audio id="chatfAudio" ref="chatfAudios" autoplay @ended="chatfAudioendfun()" v-if="audioac">
			<source :src="apifun.URLimg + audioac">
		</audio>
		<div class="information">
			<div class="topfixed">
				<div class="infosearch marginAuto">
					<el-input class="infosearch-input" @change="getfriend" v-model="searchtxt"
						prefix-icon="el-icon-search" placeholder="搜索"></el-input>
				</div>
			</div>
			<div class="infoblock">
				<div class="disconnect baiColor mainbg curpoin" v-if="!wsStatus" @click="connectfun()">
					<span>当前网络无法实时接收信息</span>
					<span class="el-icon-refresh" style="margin-left:5px;font-size:14px;"></span>
				</div>
				<!-- 公告START -->
				<div class="infoeach curpoin flex" @click="noticefun()" :class="isnotice ? 'activeinfoeach':''">
					<div class="infoeachl" style="display:flex;background-color:#fff;border-radius:5px;">
						<img style="width:16px;height:18px;border-radius:10px;margin:auto;"
							src="@/assets/chat/notice.png" alt="头像" />
						<p class="infoeachl-num mainbg" v-if="noticenum > 0">{{ noticenum }}</p>
					</div>
					<div class="infoeachr">
						<p class="infoeachr-name ellipsis01" style="line-height:40px;">系统公告</p>
					</div>
				</div>
				<!-- 公告END -->
				<div class="infoeach curpoin flex" v-for="(item,index) in infodata" :key="index"
					@click="infosefun(item,index)" v-if="item.type != 'new_order'"
					:class="chatsign == item.chat_sign ? 'activeinfoeach':''">
					<div class="infoeachl">
						<el-image class="infoeachl-p" style="width:40px;height:40px;border-radius:10px;"
							:src="apifun.URLimg+item.avatar" fit="cover">
							<div slot="error" class="image-slot">
								<img style="width:40px;height:40px;border-radius:10px;" v-if="!item.avatar"
									src="@/assets/logosvg.png" alt="头像" />
								<img style="width:40px;height:40px;border-radius:10px;" :onerror="errorimg" v-if="item.avatar"
									:src="apifun.URLimg + item.avatar"  />
							</div>
						</el-image>
						<p class="infoeachl-num mainbg" v-if="item.unread > 0">{{ item.unread }}</p>
					</div>
					<div class="infoeachr">
						<p class="infoeachr-name ellipsis01">{{ item.realname }}</p>
						<p class="infoeachr-msg ellipsis01 mainColor" v-if="item.type == 'text'"
							v-html="item.lastContent"></p>
						<p class="infoeachr-msg ellipsis01 mainColor" v-if="item.type == 'webrtc'"
							v-html="item.lastContent"></p>
						<p class="infoeachr-msg ellipsis01 mainColor"
							v-if="item.type != 'text' && item.type != 'webrtc'">{{ item | chatSetLastContentfun }}</p>
					</div>
					<div class="infoeachtime" v-if="chatsign != item.chat_sign">{{ item.lastSendTime | sendTimeMd }}
					</div>
				</div>
			</div>
		</div>
		<!-- 公告 START -->
		<div class="rblock" v-if="isnotice">
			<div class="ointrtitle">
				<p class="ointrtitle-name">系统公告</p>
			</div>
			<div class="chbatblock marginAuto flex" style="background-color:#F7F7F7;overflow-y:auto;">
				<noticelist style="width:100%;" @getnoticenum="noticemsgfun"></noticelist>
			</div>
		</div>
		<!-- 公告 end -->
		<div class="rblock flex" v-if="!infodataacitem.user_id && !isnotice">
			<img class="nonephotoimg marginAuto" style="width:150px;" src="@/assets/logoh.png" alt="占位符" />
		</div>
		<div class="rblock" v-if="infodataacitem.user_id && !isnotice">
			<div class="ointrtitle">
				<p class="ointrtitle-name">{{ infodataacitem.realname || '' }}</p>
				<p class="ointrtitle-status flex">
					<!-- <span class="ointrtitle-statusd mainbg"></span> -->
					<span class="ointrtitle-statusx" v-if="infodataacitem.login_status == 0">离线</span>
					<span class="ointrtitle-statusx" v-if="infodataacitem.login_status == 1">在线</span>
					<span class="ointrtitle-statusx" v-if="infodataacitem.login_status == 2">忙碌</span>
				</p>
			</div>
			<div class="chbatblock marginAuto flex">
				<div class="chbat">
					<div class="loadingicon" v-if="!topscrollis" style="height:20px;text-align:center;"><span
							class="el-icon-loading" style="font-size:22px;"></span></div>
					<div class="chbattop" ref="chbattopscroll" @click="contextotheritem={},usermenudata={}"
						@scroll="chatscrollbottom(true),isscroll=true">
						<div class="chbatorder" v-if="ordersendMsgdata.adverseid == infodataac">
							<div class="chbatordert flex">
								<span class="mainColor">{{ ordersendMsgdata.order_sn }}</span>
								<span class="mainColor">{{ ointstatedata[ordersendMsgdata.order_status] }}</span>
							</div>
							<div class="chbatorderb">
								<div class="chbatorderbname">{{ ordersendMsgdata.order_name }}</div>
								<div class="chbatorderbmsg flex" @click="ordershow = !ordershow">
									<p class="chbatorderbmsgtxt curpoin" :class="ordershow ? 'orderbshow':''">
										{{ ordersendMsgdata.design_need }}
									</p>
									<p class="chbatorderbmsgicon curpoin mainbg">
										<span class="el-icon-arrow-down" style="top:2px;" v-if="ordershow"></span>
										<span class="el-icon-arrow-up" v-if="ordershow == false"></span>
									</p>
								</div>
							</div>
						</div>
						<div class="chbatmsg" style="padding-bottom:50px;" v-if="chatdata.length > 0">
							<div class="chbatmsgmain" v-for="(item,index) in chatdata" :key="index">
								<!-- 别人 -->
								<div class="chbatmsgeach chbatmsgl flex" v-if="item.from_user != userInfo.user_id">
									<div class="chbatmsghead" v-if="item.type != 'system'">
										<img class="chbatmsgheadimg" v-if="item.fromUser.avatar" :onerror="errorimg"
											:src="item.fromUser.avatar" alt="自己头像" />
										<img class="chbatmsgheadimg" v-if="!item.fromUser.avatar"
											src="@/assets/logosvg.png" alt="自己头像" />
									</div>
									<div class="chbatmsgsj-sysmsg" v-if="item.type == 'system'">
										<span v-html="item.content"></span>
									</div>
									<div class="chbatmsgdata" v-if="item.type != 'system'">
										<div class="chbatmsgsj-t" v-if="item.type != 'system'">
											<span style="margin:0 5px;">{{ item.fromUser.realname }}</span>
											<span class="chbatmsgsj-ttime">{{ item.sendTime | sendTimeYMdhis }}</span>
										</div>
										<div class="chbatmsgsj-msg" style="border-top-left-radius: 0;">
											<div class="chbatmsgsj-text" v-if="item.type == 'webrtc'">
												<span v-html="item.content"></span>
											</div>
											<div class="chbatmsgsj-text" v-if="item.type == 'text'"
												@contextmenu.prevent="openContextotheremo($event,item)">
												<span v-html="item.content"></span>
											</div>
											<div class="chbatmsgsj-text" v-if="item.type == 'event'">
												<!-- 撤回 -->
												<span v-html="item.content"></span>
											</div>
											<div class="chbatmsgsj-image" v-if="item.type == 'emoticon'"
												@contextmenu.prevent="openContextotheremo($event,item)">
												<img :src="apifun.URLimg + item.content" alt="表情" />
											</div>
											<div class="chbatmsgsj-image" v-if="item.type == 'image'"
												@contextmenu.prevent="openContextotheremo($event,item)">
												<el-image style="width: 100px;" :src="apifun.URLimg + item.content"
													:preview-src-list="[apifun.URLimg + item.content]">
												</el-image>
											</div>
											<div class="chbatmsgsj-Audio flex curpoin" @click="audiobf(item,index)"
												v-if="item.type == 'voice'"
												@contextmenu.prevent="openContextotheremo($event,item)">
												<span class="chbatmsgsj-Audioicon">
													<img class="chbatmsgsj-Audioiconimg" v-if="audioac != item.content"
														src="@/assets/chat/audioicon.png" alt="未播放" />
													<img class="chbatmsgsj-Audioiconimg" v-if="audioac == item.content"
														src="@/assets/chat/audioiconac.png" alt="播放中" />
												</span>
												<span class="chbatmsgsj-Audiotxt"
													:class="audioac == item.content ? 'mainColor':''"
													v-if="item.extends">{{ item.extends.duration }}</span>
											</div>
											<div class="chbatmsgsj-file flex curpoin" v-if="item.type == 'file'"
												@contextmenu.prevent="openContextotheremo($event,item)">
												<div class="downfileicon">
													<img class="" src="@/assets/fun/fileicon.png" alt="" />
												</div>
												<div class="downfilemsg">
													<div class="downfilemsgname ellipsis01">{{ item.fileName }}</div>
													<div class="downfilemsg-rl">{{ item.fileSize | getFileSize }}</div>
												</div>
												<div class="downicon">
													<span class="el-icon-download" style="cursor: pointer;"
														@click="downloadfun(item.content,'豫图网')"></span>
												</div>
											</div>
											<div class="chbatmsgsj-file flex curpoin" v-if="item.type == 'video'"
												@click="playvideourl = item.content,playvideois=''"
												@contextmenu.prevent="openContextotheremo($event,item)">
												<!-- <video width="450" height="400" controls :src="item.content"></video> -->
												<div class="downfileicon">
													<img width="32" height="34" :src="apifun.URLimg + item.extUrl"
														alt="视频" />
												</div>
												<div class="downfilemsg">
													<div class="downfilemsgname ellipsis01">{{ item.fileName }}</div>
													<div class="downfilemsg-rl">{{ item.fileSize | getFileSize }}</div>
												</div>
												<div class="downicon" style="font-size:24px;">
													<span class="el-icon-video-play"></span>
												</div>
											</div>
											<!-- 对方引用部分START -->
											<div class="quote" v-if="item.quote&&Object.keys(item.quote).length>0">
												<div style="font-size: 14px;line-height:24px;margin-left:8px;"
													v-if="item.quote.fromUser.user_id != userInfo.user_id">
													{{ item.quote.fromUser.realname }}
												</div>
												<div style="font-size: 14px;line-height:24px;margin-left:8px;"
													v-if="item.quote.fromUser.user_id == userInfo.user_id">
													{{ userInfo.realname }}
												</div>
												<div class="chbatmsgsj-text" v-if="item.quote.type == 'text'">
													<span v-html="item.quote.content"
														style="background-color:#bbb7b7;border-radius:10px;"></span>
												</div>
												<div class="chbatmsgsj-image" v-if="item.quote.type == 'emoticon'">
													<img :src="apifun.URLimg + item.quote.content" alt="表情" />
												</div>
												<div class="chbatmsgsj-image" v-if="item.quote.type == 'image'">
													<el-image style="width:100px;"
														:src="apifun.URLimg + item.quote.content"
														:preview-src-list="[apifun.URLimg + item.quote.content]">
													</el-image>
												</div>
												<div class="chbatmsgsj-Audio flex curpoin"
													@click="audiobf(item.quote,index)"
													v-if="item.quote.type == 'voice'">
													<span class="chbatmsgsj-Audioicon">
														<img class="chbatmsgsj-Audioiconimg"
															v-if="audioac != item.quote.content"
															src="@/assets/chat/audioicon.png" alt="未播放" />
														<img class="chbatmsgsj-Audioiconimg"
															v-if="audioac == item.quote.content"
															src="@/assets/chat/audioiconac.png" alt="播放中" />
													</span>
													<span class="chbatmsgsj-Audiotxt"
														:class="audioac == item.quote.content ? 'mainColor':''"
														v-if="item.quote.extends">{{ item.quote.extends.duration }}</span>
												</div>
												<div class="chbatmsgsj-file flex curpoin"
													v-if="item.quote.type == 'file'">
													<div class="downfileicon">
														<img class="" src="@/assets/fun/fileicon.png" alt="" />
													</div>
													<div class="downfilemsg">
														<div class="downfilemsgname ellipsis01">
															{{ item.quote.fileName }}
														</div>
														<div class="downfilemsg-rl">
															{{ item.quote.fileSize | getFileSize }}
														</div>
													</div>
													<div class="downicon">
														<span class="el-icon-download" style="cursor: pointer;"
															@click="downloadfun(item.content,'豫图网')"></span>
													</div>
												</div>
												<div class="chbatmsgsj-file flex curpoin"
													v-if="item.quote.type == 'video'"
													@click="playvideourl = item.quote.content,playvideois=''">
													<!-- <video width="450" height="400" controls :src="item.content"></video> -->
													<div class="downfileicon">
														<img width="32" height="34"
															:src="apifun.URLimg + item.quote.extUrl" alt="视频" />
													</div>
													<div class="downfilemsg">
														<div class="downfilemsgname ellipsis01">
															{{ item.quote.fileName }}
														</div>
														<div class="downfilemsg-rl">
															{{ item.quote.fileSize | getFileSize }}
														</div>
													</div>
													<div class="downicon" style="font-size:24px;">
														<span class="el-icon-video-play"></span>
													</div>
												</div>
											</div>
											<!-- 对方引用部分END -->
											<div class="rightVisible" v-if="contextotheritem.id"
												style="background-color: red;" :style="{
												'left':emox+10+'px',
												'top':emoy+10+'px'
											}">
												<li class="rightVisibleeach curpoin"
													v-if="contextotheritem.type=='text'||contextotheritem.type=='emoticon'||contextotheritem.type=='image'||contextotheritem.type=='voice'||contextotheritem.type=='file'||contextotheritem.type=='video'"
													@click="quotefun(contextotheritem)">引用</li>
												<li class="rightVisibleeach curpoin"
													v-if="contextotheritem.type == 'emoticon'"
													@click="collectbremofun(contextotheritem,index)">收藏</li>
												<li class="rightVisibleeach curpoin"
													v-if="contextotheritem.type=='image' || contextotheritem.type=='file' || contextotheritem.type == 'video'"
													@click="downloadfun(contextotheritem.content,'豫图网')">下载</li>
											</div>
										</div>
									</div>
								</div>
								<!-- 自己 -->
								<div class="chbatmsgeach chbatmsgr flex"
									v-if="item.from_user == userInfo.user_id">
									<div class="chbatmsgdata clearfix">
										<div class="chbatmsgsj-t" style="text-align:right;">
											<span class="chbatmsgsj-ttime">{{ item.sendTime | sendTimeYMdhis }}</span>
											<span style="margin:0 5px;">{{ userInfo.realname }}</span>
										</div>
										<div class="chbatmsgsj-msg fr clearfix">
											<div class="chbatmsgsj-text" v-if="item.type == 'webrtc'">
												<span class='mainbg baiColor' v-html="item.content"
													style="border-radius:10px;border-top-right-radius: 0;"></span>
											</div>
											<div class="chbatmsgsj-text" style="text-align:right;border-radius:10px;border-top-right-radius:0px;"
												v-if="item.type == 'text'"
												@contextmenu.prevent="openContextusermenudata($event,item)">
												<span class='mainbg baiColor' v-html="item.content"
													style="border-radius:10px;border-top-right-radius: 0;"></span>
											</div>
											<div class="chbatmsgsj-image mainbg" v-if="item.type == 'emoticon'"
												style="border-radius:10px;border-top-right-radius:0px;"
												@contextmenu.prevent="openContextusermenudata($event,item)">
												<img :src="apifun.URLimg + item.content" alt="表情" />
											</div>
											<div class="chbatmsgsj-image mainbg" v-if="item.type == 'image'"
												style="border-radius:10px;border-top-right-radius:0px;"
												@contextmenu.prevent="openContextusermenudata($event,item,true)">
												<el-image style="width: 100px;" :src="apifun.URLimg + item.content"
													:preview-src-list="[apifun.URLimg + item.content]">
												</el-image>
											</div>
											<div class="chbatmsgsj-Audio flex curpoin mainbg" style="justify-content:flex-end;"
												@click="audiobf(item,index)" v-if="item.type == 'voice'"
												@contextmenu.prevent="openContextusermenudata($event,item)">
												<span class="chbatmsgsj-Audiotxt" style="margin-right: 8px;"
													:class="audioac == item.content ? '':'baiColor'"
													v-if="item.extends">{{ item.extends.duration }}</span>
												<span class="chbatmsgsj-Audioicon">
													<img class="chbatmsgsj-Audioiconimg" v-if="audioac != item.content"
														src="@/assets/chat/audioiconuser.png"
														style="transform: rotate(180deg);" alt="未播放" />
													<img class="chbatmsgsj-Audioiconimg" v-if="audioac == item.content"
														src="@/assets/chat/audioicon.png"
														style="transform: rotate(180deg);" alt="播放中" />
												</span>
											</div>

											<div class="chbatmsgsj-file flex curpoin mainbg" v-if="item.type == 'file'"
												@contextmenu.prevent="openContextusermenudata($event,item,true)">
												<div class="downfileicon" style="width:27px;">
													<img class="" src="@/assets/fun/fileicon.png" alt="" />
												</div>
												<div class="downfilemsg">
													<div class="downfilemsgname baiColor ellipsis01">{{ item.fileName }}</div>
													<div class="downfilemsg-rl baiColor">{{ item.fileSize | getFileSize }}</div>
												</div>
												<div class="downicon">
													<span class="el-icon-download baiColor" style="cursor: pointer;"
														@click="downloadfun(item.content,'豫图网')"></span>
												</div>
											</div>
											<div class="chbatmsgsj-file flex curpoin mainbg" v-if="item.type == 'video'"
												@click="playvideourl = item.content,playvideois=''"
												@contextmenu.prevent="openContextusermenudata($event,item)">
												<!-- <video width="450" height="400" controls :src="item.content"></video> -->
												<div class="downfileicon">
													<img width="32" height="34" :src="apifun.URLimg + item.extUrl"
														alt="视频" />
												</div>
												<div class="downfilemsg">
													<div class="downfilemsgname ellipsis01">{{ item.fileName }}</div>
													<div class="downfilemsg-rl">{{ item.fileSize | getFileSize }}</div>
												</div>
												<div class="downicon" style="font-size:24px;">
													<span class="el-icon-video-play"></span>
												</div>
											</div>
											<div v-if="item.sensitive_word_id>0"
												style="font-size:10px;color: #ff0000;">此信息包含敏感词，无法发送</div>
											<!-- 自己引用部分START -->
											<div class="quote" v-if="item.quote&&Object.keys(item.quote).length>0">
												<div style="font-size: 14px;text-align:right;line-height:24px;margin-right:8px;"
													v-if="item.quote.fromUser.user_id != userInfo.user_id">
													{{ item.quote.fromUser.realname }}
												</div>
												<div style="font-size: 14px;text-align: right;line-height:24px;margin-right:8px;"
													v-if="item.quote.fromUser.user_id == userInfo.user_id">
													{{ userInfo.realname }}
												</div>
												<div class="chbatmsgsj-text" style="text-align:right;"
													v-if="item.quote.type == 'text'">
													<span v-html="item.quote.content"
														style="border-radius: 10px;"></span>
												</div>
												<div class="chbatmsgsj-image" v-if="item.quote.type == 'emoticon'">
													<img :src="apifun.URLimg + item.quote.content" alt="表情" />
												</div>
												<div class="chbatmsgsj-image" v-if="item.quote.type == 'image'">
													<el-image style="width: 100px;"
														:src="apifun.URLimg + item.quote.content"
														:preview-src-list="[apifun.URLimg + item.quote.content]">
													</el-image>
												</div>
												<div class="chbatmsgsj-Audio flex curpoin"
													style="justify-content:flex-end;" @click="audiobf(item.quote,index)"
													v-if="item.quote.type == 'voice'">
													<span class="chbatmsgsj-Audiotxt" style="margin-right: 8px;"
														:class="audioac == item.quote.content ? 'mainColor':''"
														v-if="item.quote.extends">{{ item.quote.extends.duration }}</span>
													<span class="chbatmsgsj-Audioicon">
														<img class="chbatmsgsj-Audioiconimg"
															v-if="audioac != item.quote.content"
															src="@/assets/chat/audioicon.png"
															style="transform: rotate(180deg);" alt="未播放" />
														<img class="chbatmsgsj-Audioiconimg"
															v-if="audioac == item.quote.content"
															src="@/assets/chat/audioiconac.png"
															style="transform: rotate(180deg);" alt="播放中" />
													</span>
												</div>

												<div class="chbatmsgsj-file flex curpoin"
													v-if="item.quote.type == 'file'">
													<div class="downfileicon" style="width:27px;">
														<img class="" src="@/assets/fun/fileicon.png" alt="" />
													</div>
													<div class="downfilemsg">
														<div class="downfilemsgname ellipsis01">
															{{ item.quote.fileName }}
														</div>
														<div class="downfilemsg-rl">
															{{ item.quote.fileSize | getFileSize }}
														</div>
													</div>
													<div class="downicon">
														<span class="el-icon-download" style="cursor: pointer;"
															@click="downloadfun(item.content,'豫图网')"></span>
													</div>
												</div>
												<div class="chbatmsgsj-file flex curpoin"
													v-if="item.quote.type == 'video'"
													@click="playvideourl = item.quote.content,playvideois=''">
													<!-- <video width="450" height="400" controls :src="item.content"></video> -->
													<div class="downfileicon">
														<img width="32" height="34"
															:src="apifun.URLimg + item.quote.extUrl" alt="视频" />
													</div>
													<div class="downfilemsg">
														<div class="downfilemsgname ellipsis01">
															{{ item.quote.fileName }}
														</div>
														<div class="downfilemsg-rl">
															{{ item.quote.fileSize | getFileSize }}
														</div>
													</div>
													<div class="downicon" style="font-size:24px;">
														<span class="el-icon-video-play"></span>
													</div>
												</div>
											</div>
											<!-- 自己引用部分END -->
											<div class="rightVisible" v-if="usermenudata.id" :style="{
												'left':emox+10+'px',
												'top':emoy+10+'px'
											}">
												<li class="rightVisibleeach curpoin"
													v-if="usermenudata.type=='text'||usermenudata.type=='emoticon'||usermenudata.type=='image'||usermenudata.type=='voice'||usermenudata.type=='file'||usermenudata.type=='video'"
													@click="quotefun(usermenudata)">引用</li>
												<li class="rightVisibleeach curpoin" @click="recallfun(usermenudata)">撤回
												</li>
												<li class="rightVisibleeach curpoin" v-if="usermenudata.isdown"
													@click="downloadfun(usermenudata.content,'豫图网')">下载</li>
											</div>
										</div>
									</div>
									<div class="chbatmsghead">
										<img class="chbatmsgheadimg" v-if="userInfo.avatar" :src="userInfo.avatar" :onerror="errorimg"
											alt="自己头像" />
										<img class="chbatmsgheadimg" v-if="!userInfo.avatar" src="@/assets/logosvg.png"
											alt="自己头像" />
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="chbatsend" style="height:120px;">
						<div class="chbatsendt flex">
							<!-- 表情start -->
							<div class="diaemojibgfg" @click="emojiis=false" v-if="emojiis"></div>

							<div class="diaemoji" v-if="emojiis" @click="emophotodelid = ''">
								<div class="diaemojit">
									<div class="diaemojiticon diaemojitmain" v-if="isemo == 1">
										<span class="diaemojiticon-icon curpoin" v-for="(item,index) in emojidata"
											:key="index" @click="diaemojiticonfun(item)">{{ item }}</span>
									</div>
									<div class="diaemojitphoto diaemojitmain clearfix" v-if="isemo == 2">
										<div class="diaemojitphotoimage fl">
											<el-upload class="diaemojitphotoimage-upload" :show-file-list="false"
												:action="apifun.hrefURL + '/pc/upload/upload'" name="file"
												:headers="token" :on-success="uploademocollectSuccess"
												:before-upload="uploadfile.fileImg">
												<span class="diaemojitphotoimage-icon el-icon-plus"></span>
											</el-upload>
										</div>
										<div class="diaemojitphotoimage fl"
											@contextmenu.prevent="openContextMenu($event,item)"
											@click="sendemophotofun(item)" v-for="(item,index) in emophotodata"
											:key="index">
											<img class="diaemojitphotoimage-img" :src="apifun.URLimg + item.url"
												alt="表情图" />
										</div>
										<div class="emoVisible" v-if="emophotodelid != ''" :style="{
											'left':emox+10+'px',
											'top':emoy+10+'px'
										}">
											<li class="emoVisibleeach curpoin" @click="delemofun()">删除</li>
										</div>
									</div>
								</div>
								<div class="diaemojib flex">
									<div class="diaemojibeach curpoin" :class="isemo == 1 ? 'acdiaemojibeach':''"
										@click="tagemofun(1)">
										<img src="@/assets/chat/chat1.png" alt="表情" />
									</div>
									<div class="diaemojibeach curpoin" :class="isemo == 2 ? 'acdiaemojibeach':''"
										@click="tagemofun(2)">
										<img style="width:23px;height:23px;" src="@/assets/chat/collect.png"
											alt="收藏表情" />
									</div>
								</div>
							</div>
							<!-- 引用信息 -->
							<div class="quoteblockshow" v-if="isquote">
								<div class="quotebsclose curpoin" @click="isquote=false,quotedata={}">
									<span class="el-icon-circle-close"></span>
								</div>
								<div class="quotebs ellipsis01" v-if="quotedata.type == 'text'">{{ quotedata.content }}
								</div>
								<div class="quotebs" v-if="quotedata.type == 'image'">[图片]</div>
								<div class="quotebs" v-if="quotedata.type == 'voice'">[语音]</div>
								<div class="quotebs" v-if="quotedata.type == 'video'">[视频]</div>
								<div class="quotebs" v-if="quotedata.type == 'file'">[文件]</div>
								<div class="quotebs" v-if="quotedata.type == 'emoticon'">[表情]</div>
							</div>
							<!-- 表情END -->
							<div class="chbatsendtl flex">
								<img class="curpoin" src="@/assets/chat/chat1.png"
									@click="emojiis=true,isemo=1,isquote=false,quotedata={}" alt="表情"
									style="width:24px;height:24px;" />
								<img class="curpoin" src="@/assets/chat/chat2.png"
									@click="sendphotois=true;fileLoading=false;sendphoto={};filePer=0" alt="图片"
									style="width:18px;height:18px;margin-top:2px;" />
								<img class="curpoin" src="@/assets/chat/chat3.png" @click="voicefun()" alt="语音"
									style="width:24px;height:24px;" />
								<img class="curpoin" src="@/assets/chat/chat4.png"
									@click="uploadsjxqis=true;fileLoading=false;sendfile={};filePer=0" alt="文件"
									style="width:22px;height:22px;margin-top: 2px;" />
								<img class="curpoin" @click="isrecord = !isrecord" src="@/assets/chat/chat5.png"
									alt="记录" style="width:22px;height:22px;margin-top:1px;" />
							</div>
							<div class="chbatsendtr curpoin" @click="sendmsgfun()">
								<span class="chbatsendtr-z">使用Ctrl+Enter换行</span>
								<span class="chbatsendtr-s">
									<img class="chbatsendtr-sp" src="@/assets/chat/chatenter.png" alt="发送" />
								</span>
							</div>
						</div>
						<div class="chbatsendb">
							<textarea class="chbatsendbtxt" v-model="sendtxt" @keydown.enter="sendmsgfun"
								placeholder="请输入" @paste="handlePaste"></textarea>
						</div>
					</div>
				</div>
				<chatrecord v-if="isrecord" :orderid="infodataacitem.order_id||infodataacitem.orderId"
					:toContactId="infodataac"></chatrecord>
			</div>
		</div>
		<el-dialog :close-on-click-modal="false" title="上传文件" :visible.sync="uploadsjxqis" width="400px" top="70px"
			:before-close="uploadClosefun" :modal-append-to-body="false">
			<div v-loading="fileLoading" element-loading-text="文件上传中，请勿操作" element-loading-spinner="el-icon-loading"
				element-loading-background="rgba(255, 255, 255, 0.6)">
				<el-upload id="uploadfliexq" drag multiple :show-file-list="false"
					:action="apifun.hrefURL + '/pc/upload/upload'" name="file" :headers="token"
					:on-success="uploadfileSuccess" :before-upload="uploadfile.filenotmp4"
					:on-progress="onProgressFile">
					<i class="el-icon-upload"></i>
					<div class="el-upload__text">将文件拖到此处，或<em class="mainColor">点击上传</em></div>
					<div class="el-upload__tip" slot="tip">上传的文件不超过{{ uploadfile.fileSizenum }}M</div>
				</el-upload>
				<br>
				<el-progress :percentage="filePer" color="#FF5E03" v-if="filePer>0"></el-progress>
				<div class="flielist">
					<div class="flieitem flex" v-if="sendfile.name">
						<div class="flieiteml">
							<span class="flieitemlicon el-icon-document"></span>
							<span class="flieitemlname">{{ sendfile.name }}</span>
						</div>
						<div class="flieitemr curpoin" @click="sendfile={}">
							<span class="el-icon-delete"></span>
						</div>
					</div>
				</div>
				<div class="replacebtn" style="margin-top:20px;">
					<el-button class="replacebtneach mainbg"
						@click="sendfile.name?sendfliefun():waitTime()">完成</el-button>
				</div>
			</div>
		</el-dialog>
		<!-- 发送图片 -->
		<el-dialog :close-on-click-modal="false" id="sendphoto" title="选择图片" :visible.sync="sendphotois" width="350px"
			top="100px" :before-close="diaClosefun" :modal-append-to-body="false">
			<div v-loading="fileLoading" element-loading-text="文件上传中，请勿操作" element-loading-spinner="el-icon-loading"
				element-loading-background="rgba(255, 255, 255, 0.6)">
				<div class="sepaypathinput flex">
					<el-upload class="upload-demo" :show-file-list="false"
						:action="apifun.hrefURL + '/pc/upload/upload'" name="file" :headers="token"
						:on-success="sendphotoSuccess" :before-upload="uploadfile.fileImg"
						:on-progress="onProgressFile">
						<div class="sepaypathinputphoto flex">
							<span class="sepaypathinputphotoicon marginAuto el-icon-picture-outline"></span>
							<img class="sepaypathinputphotoimg" v-if="sendphoto.src" :onerror="errorimg"
								:src="apifun.URLimg + sendphoto.src" alt="发送图片" />
						</div>
					</el-upload>
				</div>
				<br>
				<el-progress :percentage="filePer" color="#FF5E03" v-if="filePer>0"></el-progress>
				<div class="replacebtn">
					<el-button class="replacebtneach" style="background-color:#999999;"
						@click="sendphotois=false">取消</el-button>
					<el-button class="replacebtneach mainbg"
						@click="sendphoto.src?sendphotofun():waitTime()">提交</el-button>
				</div>
			</div>
		</el-dialog>
		<!-- 播放视频 -->
		<el-dialog id="playvideo" title="播放视频" :visible.sync="playvideois" width="490px" top="80px"
			:before-close="diaClosefun" :modal-append-to-body="false">
			<div class="videoclass">
				<video width="450" height="400" controls :src="apifun.URLimg + playvideourl"></video>
			</div>
		</el-dialog>
		<!-- 语音通话 -->
		<!-- <voiceblock v-show="false" :infodataacitem="infodataacitem" :answer="answer" :statustype="statustype"  @fvoiceisfun="fvoiceisfun"></voiceblock> -->
		 <socket ref="socketref"></socket>
	</div>
</template>

<script>
	import {
		ipcRenderer
	} from "electron";
	import RTCDetect from 'rtc-detect';
	import chatrecord from '@/components/chat/chatrecord';
	// import voiceblock from '@/components/chat/voiceblock';
	import voiceblock from '@/views/voice/voice';
	import noticelist from '@/components/chat/noticelist';
	import socket from '@/components/chat/socket';
	import {
		getMsgType,
		beforeTime,
		chatSetLastContent,
		emoji,
		roomcode,
	} from '@/utils/publicfun';
	import utils from '@/utils/utils';
	import {
		getFileSize,
		getFileExtImg,
		download
	} from "@/utils/file";

	export default {
		components: {
			chatrecord,
			// voiceblock,
			noticelist,
			socket
		},
		props: {
			bookSendMsgdata: { // 通讯录
				type: Object,
				default: {}
			},
			ordersendMsgdata: { // 订单
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				token: {
					Authorization: localStorage.getItem('token')
				},
				errorimg:'this.src="'+require('@/assets/logosvg.png')+'"',
				ointstatedata: ['未分配', '进行中', '已定稿', '死单', '暂停', '退款中', '已退款'],
				roleId: '',
				page: 1,
				limit: 20,
				userInfo: {},
				searchtxt: '',
				sendtxt: '',
				sendfile: {},
				sendphotois: false, //  发送图片
				sendphoto: {},
				contacts: [], //  处理后的列表
				chatsign: '', // 聊天唯一标识  一方id-一方id-订单号
				infodataac: '', // 对方user_id
				infodataacitem: {
					// user_id:111
				},
				ordermsg: {}, // order
				ordershow: false,
				chatdata: [], // 聊天数据
				isrecord: false, // 打开记录
				emojidata: emoji(),
				uploadsjxqis: false,
				audioac: '', // 语音播放
				emojiis: false, // 表情弹窗部分
				isquote: false, // 引用弹窗部分
				quotedata: {},
				isemo: 1,
				emox: 0,
				emoy: 0,
				emophotodata: [],
				emophotodelid: '', // 记录删除
				contextotheritem: {}, // 别人右击数据
				usermenudata: {}, // 操作自己发的内容
				playvideois: false,
				playvideourl: '',
				topscrollis: true, // 上划加载聊天记录
				isdataScroll: false, // 先执行数据渲染在滚动到指定位置
				isscroll: false,
				fvoiceis: false, // 音频
				newmsgdata: {},
				statustype: 1,
				isnotice: false,
				answer: {
					extends: {
						event: ''
					}
				},
				noticenum: 0,
				noticelastContent: '',
				filePer: 0,
				fileLoading: false,
				isShowWin: true,
				unReadChat: {}
			}
		},
		mounted() {
			this.roleId = this.$store.state.roleId;
			this.userInfo = JSON.parse(localStorage.getItem('userInfo'));
			this.getfriend();
			this.noticemsgfun();
			/*窗口最小化和托盘消息已读未读处理-start*/
			ipcRenderer.on("showWin", (event, newValue) => {
				this.isShowWin = newValue
				if (newValue) {
					if (Object.keys(this.unReadChat).length > 0) {
						this.setMsgRead(this.unReadChat)
					}
				} else {
					this.unReadChat = {}
				}
			})
			/*窗口最小化和托盘消息已读未读处理-end*/
			ipcRenderer.on("chatsenddata", (event, newValue) => { // 音频结束发送 (自己挂断组装数据（同sendmsgajaxfun）)
				if (newValue) {
					this.chatdata.push(newValue);
				}
			});
		},
		methods: {
			connectfun(){  // 重新连接scoket
				this.$refs.socketref.initWebSocket();
			},
			/*上传进度条、遮罩层-start*/
			waitTime() {
				this.$message({
					message: '请上传文件或等待上传反馈',
					type: 'warning'
				});
			},
			sucTime() {
				// this.$message({
				// 	message: '上传成功',
				// 	type: 'success'
				// });
			},
			onProgressFile(event, file, fileList) {
				this.filePer = Number(Number(event.percent).toFixed(0))
				if (event.percent > 0) {
					this.fileLoading = true
					if (event.percent == 100) {
						this.fileLoading = false
					}
				}
			},
			/*上传进度条、遮罩层-end*/
			/*复制start*/
			handlePaste(event) {
				//ctrl+V 复制上传图片
				const clipboardData = event.clipboardData || window.clipboardData;
				if (!clipboardData) return;
				const items = clipboardData.items;
				if (!items) return;
				if(items.length <= 1){  // 截图的情况下file.path的值是空字符串；所以加此判断
					let fileitem = items[0];
					if (fileitem.kind === "file" && fileitem.type.startsWith("image/")) {
						this.uploadImage(fileitem.getAsFile());
					}
				}else{
					for (let i = 0; i < items.length; i++) {
						const item = items[i];
						if (item.kind === "file" && item.type.startsWith("image/")) {
							const file = item.getAsFile();
							if (file.path) {
								this.uploadImage(file);
							}
						}
					}
				}
			},
			uploadImage(file) {
				const formData = new FormData();
				formData.append("file", file);
				this.apifun
					.$post("/pc/upload/upload", formData)
					.then((res) => {
						// 假设服务器返回的图片URL
						if (res.code == 200) {
							let sendData = {
								raw: file.raw, // name、path、size、type、uid
								name: file.name,
								resdata: res.data.data,
								id: res.data.file_id,
								src: res.data.src,
							};
							this.sendphoto = sendData;
							this.sendphotofun();
						}
					})
					.catch((error) => {
						console.error("上传图片失败:", error);
					});
			},
			/*复制end*/
			initContacts(data, type = 0) { // 处理聊天列表数据  type:1列表中有此人；0列表中没有此人
				let contacts = utils.sortContacts(data);
				let otherContacts = [];
				// 向列表中加内容或更改
				contacts.forEach((item, index) => {
					otherContacts.push(item)
				});
				this.contacts = otherContacts;
				otherContacts.forEach((item, index) => {
					if (item.chat_sign === this.chatsign) {
						if (type != 1) {
							if (!this.chatdata.some(obj => obj.msg_id === item.msg_id)) { // 去除别人多余
								this.chatdata.push(item);
							}
						}
						this.chatdata = this.chatdata.filter((obj) => { // 去除自己多余
							return obj['msg_id'] != 0
						});
					}
				})
				setTimeout(() => {
					if (this.infodataac) {
						this.isscroll = false;
						this.chatscrollbottom()
					}
				},0)
				// localStorage.setItem('allContacts', JSON.stringify(this.contacts)); // socket中需要用到（新消息提示音）
			},
			appendContacts(data) { // 别人发的
				// const contacts = this.contacts;
				const contacts = this.$store.state.contactList;
				const contact = contacts.filter(item => item.chat_sign == data.chat_sign); // 检查是否有该联系人,有就更新,没有就增加
				if (contact.length > 0) {
					contact[0].lastSendTime = contact[0].sendTime;  // 根据最后发送时间（lastSendTime）；新消息置顶；utils.sortContacts方法中判断
					this.updateContacts(contact)
				} else {
					contacts.push(data);
					this.initContacts(contacts);
				}
			},
			updateContacts(data) {
				// const contacts = this.contacts;
				const contacts = this.$store.state.contactList;
				let objdata = {};
				contacts.forEach((item, index) => {
					if (item.chat_sign == data.chat_sign) {
						contacts[index] = Object.assign(objdata, data)
					}
				})
				
				this.initContacts(contacts);
				if (this.isShowWin) {
					if (this.infodataac == data.from_user) { //当前窗口消息已读
						this.setMsgRead(data)
					}
				} else {
					if (this.infodataac == data.from_user) { //当前窗口隐藏消息已读
						this.unReadChat = data
					}
				}
			},
			setMsgRead(data) { //消息已读
				this.apifun.$post('/pc/im/setMsgisRead', {
					chat_sign: data.chat_sign
				}).then((res) => {
					if (res.code == 200) {}
				})
			},
			// ------基础
			infosefun(item) { // 选择好友
				this.isnotice = false;
				if (item) {
					this.chatsign = item.chat_sign;
					this.infodataac = item.user_id;
					this.infodataacitem = item;
				}
				this.audioac = '';

				this.isrecord = false;
				this.page = 1;
				this.chatdata = [];
				this.isdataScroll = false;
				this.isscroll = false;
				this.newmsgdata = {};
				// 计算未读数量；清理当前查看的未读数量
				let allunreadnum = 0;
				if(this.chatsign == item.chat_sign){
					item.unread = 0;
					let contactsdata = this.contacts;
					// let contactsdata = this.$store.state.contactList;
					contactsdata.forEach((items,indexs)=>{
						if(item.chat_sign == items.chat_sign){
							contactsdata[indexs].unread = 0;
						}
						allunreadnum += items.unread;
					});
					this.contacts = contactsdata;
					this.$store.state.allunreadnum = allunreadnum;
					this.$store.state.contactList = contactsdata;
				};
				// 点击切换人时订单信息要清空STARt
				this.ordersendMsgdata = {};
				// 点击切换人时订单信息要清空END
				this.getContacts();
			},
			noticefun() { // 公告
				this.isnotice = true;
				this.chatsign = '';
				this.infodataac = '';
				this.infodataacitem = {};
			},
			sendmsgfun(e) { // 发送文本消息
				if (this.sendtxt === '') {
					this.$message({
						message: '不能发送空白信息',
						type: 'warning'
					});
					if (e && e.keyCode == 13) {
						let that = this
						that.$nextTick(() => {
							that.sendtxt = ''; // 文本
							that.emojiis = false; // 表情图
						})
						e.preventDefault()
					}
					return false
				};
				if (!e) {
					this.sendmsgajaxfun({
						type: 'text',
						content: this.textWithLineBreaks(this.sendtxt)
					});
				} else {
					if (!e.ctrlKey && e && e.keyCode == 13) {
						let that = this
						that.$nextTick(() => {
							that.sendtxt = ''; // 文本
							that.emojiis = false; // 表情图
						})
						e.preventDefault()
					}
					if (!e) {
						e = {
							ctrlKey: '',
							keyCode: ''
						}
					}
					if (e && e.ctrlKey && e.keyCode == 13) {
						this.sendtxt += '\n';
					} else {
						this.sendmsgajaxfun({
							type: 'text',
							content: this.textWithLineBreaks(this.sendtxt)
						});
					}
				}
			},
			textWithLineBreaks(str) {
				return str.replace(/\n/g, "<br>");
			},
			sendemophotofun(item) { // 发送表情图片
				this.sendmsgajaxfun({
					type: 'emoticon',
					file_id: item.file_id,
					content: item.url
				})
			},
			sendphotoSuccess(res, file) {
				let sendData = {
					raw: file.raw, // name、path、size、type、uid
					name: file.name,
					resdata: res.data,
					id: res.data.file_id,
					src: res.data.src
				};
				if (res.code == 200) {
					this.sendphoto = sendData
					this.sucTime()
				} else {
					this.$message({
						message: res.msg,
						type: 'warning'
					});
				}
			},
			sendphotofun() { // 发送图片消息
				if (!this.sendphoto.id) {
					this.$message({
						message: '不能发送空白信息',
						type: 'warning'
					});
					return false
				};
				this.sendmsgajaxfun({
					type: "image",
					content: this.sendphoto.src,
					file_id: this.sendphoto.id
				})
			},
			voicefun() { //  语音通话
				const detect = new RTCDetect();
				let Supported = detect.getAPISupported();
				if (Supported.isWebRTCSupported) { // 支持webRTC
					detect.getDevicesAsync().then((res) => {
						if (res.hasMicrophonePermission && res.microphones.length > 0) { // 判断有麦克风设备
							if (res.speakers.length > 0) { //  判断有扬声器设备
								// this.fvoiceis = true;
								let infodataacitem = this.infodataacitem;
								this.infodataacitem = infodataacitem;
								this.$store.state.statustype = 1;
								this.$store.commit('infodataacitemfun', infodataacitem);
								this.electron.ipcRenderer.send('open-call-window');
								setTimeout(() => {
									this.electron.ipcRenderer.send("statustype", 1);
									this.electron.ipcRenderer.send("infodataacitem", infodataacitem);
								}, 300)
							} else {
								this.$message({
									message: '未检测到扬声器设备，请检查设备或转至手机继续语音',
									type: 'warning'
								});
							}
						} else {
							this.$message({
								message: '未检测到麦克风，请检查设备或转至手机继续语音',
								type: 'warning'
							});
						}
					});
				} else {
					this.$message({
						message: '您的浏览器暂不支持音频模块；请升级浏览器再试',
						type: 'warning'
					});
				}
				if (Supported.isWebSocketSupported) {
					console.log("支持webSocket")
				}

				// let infodataacitem = this.infodataacitem;
				// this.infodataacitem = infodataacitem;
				// this.$store.state.statustype = 1;
				// this.$store.commit('infodataacitemfun', infodataacitem);
				// this.electron.ipcRenderer.send('open-call-window');
				// setTimeout(()=>{
				// 	this.electron.ipcRenderer.send("statustype",1);
				// 	this.electron.ipcRenderer.send("infodataacitem",infodataacitem);
				// },300)
			},
			// fvoiceisfun(userchat){  // 自己挂断组装数据（同sendmsgajaxfun）
			// 	this.fvoiceis = false;
			// 	if(userchat){
			// 		this.chatdata.push(userchat);
			// 	}
			// },
			audiobf(item, index) { // 播放语音
				if (this.audioac != '') {
					this.audioac = '';
					this.$refs.chatfAudios.pause();
					return false
				}
				this.audioac = item.content;
				// this.$refs.chatfAudios.play();
			},
			chatfAudioendfun() {
				this.audioac = '';
				this.$refs.chatfAudios.pause();
			},
			uploadfileSuccess(res, file) { //上传文件成功
				let sendData = {
					raw: file.raw, // name、path、size、type、uid
					name: file.name,
					id: res.data.file_id,
					cate: res.data.cate,
					src: res.data.src,
					poster: res.data.poster
				};
				if (res.code == 200) {
					this.sendfile = sendData
					this.sucTime()
				} else {
					this.$message({
						message: res.msg,
						type: 'warning'
					});
				}
			},
			async sendfliefun() { // 发送文件
				if (!this.sendfile.id) {
					this.$message({
						message: '不能发送空白信息',
						type: 'warning'
					});
					return false
				};
				if (this.sendfile.cate == 4) {
					let videoInfo = await this.getFileDuration(this.sendfile.raw)
					this.sendmsgajaxfun({
						type: "video",
						content: this.sendfile.src,
						extends: {
							duration: videoInfo.duration,
							height: videoInfo.height,
							width: videoInfo.width,
							poster: this.sendfile.poster
						},
						file_id: this.sendfile.id
					})
				} else {
					this.sendmsgajaxfun({
						type: "file",
						content: this.sendfile.src,
						file_id: this.sendfile.id
					})
				}
			},
			// 获取视频时长
			getFileDuration(content) {
				return new Promise((resolve) => {
					const videoElement = document.createElement("video");
					videoElement.src = URL.createObjectURL(content);
					videoElement.addEventListener("loadedmetadata", function() {
						resolve({
							duration: parseInt(videoElement.duration),
							height: videoElement.videoHeight,
							width: videoElement.videoWidth,
						});
					});
				});
			},
			sendmsgajaxfun(sendData) { //发送数据
				sendData.id = utils.getUuid();
				sendData.toContactId = this.infodataac;
				sendData.order_id = this.infodataacitem.order_id || this.infodataacitem.orderId || 0;
				sendData.quote = this.quotedata;
				setTimeout(()=>{
					this.isquote = false;
					this.quotedata = {};
					this.sendtxt = ''; // 文本
					this.emojiis = false; // 表情图
					this.sendfile = {};
					this.uploadsjxqis = false; // 文件
					this.sendphotois = false; // 图片
					this.sendphoto = {}
				})
				this.apifun.$post('/pc/im/sendMessage', sendData).then((res) => {
					// console.log('res',res)
					if (res.code == 200) {
						this.chatdata.push(res.data);
						// this.updateContacts(res.data);
						this.isquote = false;
						this.quotedata = {};
						this.sendtxt = ''; // 文本
						this.emojiis = false; // 表情图
						this.sendfile = {};
						this.uploadsjxqis = false; // 文件
						this.sendphotois = false; // 图片
						this.sendphoto = {}
						setTimeout(() => {
							if (this.infodataac) {
								this.isscroll = false;
								this.chatscrollbottom()
							}
						}, 0)
					}
				});
			},
			getContacts(oldscroll) { // 聊天记录
				let sendData = {
					toContactId: this.infodataac,
					is_group: 0,
					type: '',
					is_at: '0', // 是否@ 0不是 1是
					keywords: '',
					page: this.page,
					limit: this.limit,
					last_id: '',
					directional: 0, // 0下拉加载以前的消息 1上拉加载以后的消息
					order_id: this.infodataacitem.order_id || this.infodataacitem.orderId || 0
				};
				this.apifun.$post('/pc/im/getMessageList', sendData).then((res) => {
					if (res.code == 200) {
						this.topscrollis = true;
						let datas = res.data;
						// let chatdata = datas.data.reverse();
						let chatdata = datas.data;
						if (chatdata.length <= 0) {
							this.page--
							return false;
						}
						this.chatdata = [...chatdata, ...this.chatdata];
						setTimeout(() => {
							if (this.page == 1) {
								this.isscroll = false;
								this.isdataScroll = true;
								this.chatscrollbottom()
							} else {
								let chbattopscroll = this.$refs.chbattopscroll;
								chbattopscroll.scrollTop = chbattopscroll.scrollHeight - oldscroll;
							}
						},300)
					}
				})
			},
			getfriend() { // 获取好友列表
				let sendData = {
					search: this.searchtxt
				};
				this.apifun.$post('/pc/im/getContacts', sendData).then((res) => {
					if (res.code == 200) {
						let infodataall = res.data;
						let infodata = infodataall.filter(obj => obj.lastContent != '');
						this.$store.state.contactList = infodata;
						if (!this.bookSendMsgdata.user_id && !this.ordersendMsgdata.user_id) {
							this.initContacts(infodata);
							this.chatsign = '';
							this.infodataac = '';
							this.infodataacitem = {};
							return false;
						};
						// 通讯进入
						let bookSendMsgdata = this.bookSendMsgdata;
						if (bookSendMsgdata.user_id) {
							let acarr = infodata.filter(obj => obj.user_id == bookSendMsgdata.user_id);
							this.infodataac = bookSendMsgdata.user_id;
							this.infodataacitem = {
								user_id: bookSendMsgdata.user_id,
								order_id: 0,
							}
							this.chatsign = roomcode(this.userInfo.user_id, bookSendMsgdata.user_id, 0)
							this.getContacts();
							if (acarr.length > 0) { // 有
								this.initContacts(infodata, 1);
							} else {
								this.addgetfriend(infodata, 0) //列表+人
							}
						};
						// 订单进入
						let ordersendMsgdata = this.ordersendMsgdata;
						if (ordersendMsgdata.user_id) {
							if (ordersendMsgdata.adverseid == ordersendMsgdata.user_id) { // 用户
								let acarr = infodata.filter(obj => obj.user_id == ordersendMsgdata
									.user_id);
								this.infodataac = ordersendMsgdata.user_id;
								this.infodataacitem = {
									user_id: ordersendMsgdata.user_id,
									order_id: ordersendMsgdata.id,
									realname:ordersendMsgdata.order_name,
								}
								this.chatsign = roomcode(this.userInfo.user_id, ordersendMsgdata.user_id,
									ordersendMsgdata.id)
								this.getContacts();
								if (acarr.length > 0) { // 有
									this.initContacts(infodata, 1);
								} else {
									this.addgetfriend(infodata, ordersendMsgdata.id) //列表+人
								}
							} else { // 设计
								let acarr = infodata.filter(obj => obj.user_id == ordersendMsgdata
									.design_id);
								this.infodataac = ordersendMsgdata.design_id;
								this.infodataacitem = {
									user_id: ordersendMsgdata.design_id,
									order_id: ordersendMsgdata.id,
									realname:ordersendMsgdata.order_name,
								}
								this.chatsign = roomcode(this.userInfo.user_id, ordersendMsgdata.design_id,ordersendMsgdata.id)
								this.getContacts();
								if (acarr.length > 0) { // 有
									this.initContacts(infodata, 1);
								} else {
									this.addgetfriend(infodata, ordersendMsgdata.id) //列表+人
								}
							}
						};
					}
				})
			},
			addgetfriend(infodata, orderid) {
				let bookSendMsgdata = this.bookSendMsgdata;
				if (bookSendMsgdata.user_id) {
					let additem = {
						avatar: bookSendMsgdata.avatar,
						realname: bookSendMsgdata.realname,
						user_id: bookSendMsgdata.user_id,
						role_id: bookSendMsgdata.role_id,
						type: 'text',
						lastContent: '',
						order_id: orderid
					}
					infodata.unshift(additem)
					this.infodataac = bookSendMsgdata.user_id;
					this.infodataacitem = additem;
					this.chatsign = roomcode(this.userInfo.user_id, bookSendMsgdata.user_id, orderid)
					this.initContacts(infodata);
					return false
				};
				let ordersendMsgdata = this.ordersendMsgdata;
				if (ordersendMsgdata.user_id) {
					let additem = {};
					if (ordersendMsgdata.adverseid == ordersendMsgdata.user_id) { // 用户
						additem = {
							avatar: ordersendMsgdata.user_avatar,
							realname: ordersendMsgdata.user_name,
							user_id: ordersendMsgdata.user_id,
							role_id: 5,
							type: 'text',
							lastContent: '',
							order_id: orderid
						}
					} else { // 设计
						additem = {
							avatar: ordersendMsgdata.design_avatar,
							realname: ordersendMsgdata.design_name,
							user_id: ordersendMsgdata.design_id,
							role_id: 8,
							type: 'text',
							lastContent: '',
							order_id: orderid
						}
					}
					infodata.unshift(additem)
					this.infodataac = ordersendMsgdata.adverseid;
					this.infodataacitem = additem;
					this.chatsign = roomcode(this.userInfo.user_id, ordersendMsgdata.adverseid, orderid)
					this.initContacts(infodata);
					return false
				}
			},
			diaemojiticonfun(item) { // 选择表情
				this.emojiis = false;
				this.sendtxt = this.sendtxt + item;
			},
			openContextMenu(event, item, index) { // 右击显示删除(表情)
				this.emophotodelid = item.file_id; // 删除id
				this.emox = event.clientX;
				this.emoy = event.clientY;
			},
			openContextotheremo(event, item) { // 右击展示功能弹窗
				// console.log('右击别人信息',item)
				this.usermenudata = {};
				this.contextotheritem = item;
				this.emox = event.clientX;
				this.emoy = event.clientY;
			},
			openContextusermenudata(event, item, isdown) {
				// console.log('右击自己信息',item)
				if (isdown) {
					item.isdown = true;
				};
				this.contextotheritem = {};
				this.usermenudata = item;
				this.emox = event.clientX;
				this.emoy = event.clientY;
			},
			tagemofun(type) { // 收藏表情列表
				if (type == this.isemo) return false;
				this.emophotodelid = '';
				this.isemo = type;
				if (type == 2) {
					this.apifun.$post('/pc/upload/getCollectImgList', {}).then((res) => {
						// console.log(res)
						if (res.code == 200) {
							this.emophotodata = res.data;
						}
					})
				}
			},
			uploademocollectSuccess(res, file) { // 上传收藏表情
				this.emophotodelid = '';
				if (res.code == 200) {
					let datas = res.data;
					this.collectemofun({
						file: datas.src,
						file_id: datas.file_id,
					})
				} else {
					this.$message({
						message: res.msg,
						type: 'warning'
					});
				}
			},
			collectbremofun(item) { //  收藏别人表情
				this.collectemofun({
					file: item.content,
					file_id: item.file_id,
				})
			},
			collectemofun(sendData) { //  收藏表情
				this.apifun.$post('/pc/upload/collectImg', sendData).then((res) => {
					// console.log(res)
					if (res.code == 200) {
						this.$message({
							message: '收藏成功',
							type: 'success'
						});
						this.emophotodata.unshift({
							"file_id": sendData.file_id,
							"url": sendData.file
						})
					}
				})
			},

			delemofun() { //  删除表情
				let sendData = {
					file_id: this.emophotodelid
				};
				let emophotodelid = this.emophotodelid;
				this.apifun.$post('/pc/upload/delCollectImg', sendData).then((res) => {
					// console.log(res)
					if (res.code == 200) {
						this.emophotodata.forEach((item, index) => {
							if (item.file_id == emophotodelid * 1) {
								this.emophotodata.splice(index, 1);
							}
						})
						this.emophotodelid = '';
					}
				})
			},
			diaClosefun() {
				this.sendphotois = false; // 发送图片
				this.playvideois = false;
			},
			// ---------聊天基础函数
			noticemsgfun() { //  最新公告信息
				this.apifun.$post('/pc/article/getLastArticleInfo', {}).then((res) => {
					// console.log(res)
					if (res.code == 200) {
						let datas = res.data;
						this.noticenum = datas.no_read;
						this.noticelastContent = datas.content;
					}
				})
			},
			chatscrollbottom(toptype) {
				let chbattopscroll = this.$refs.chbattopscroll;
				if (this.isscroll) {
					let topscroll = chbattopscroll.scrollTop;
					if (topscroll < 20 && this.topscrollis) {
						this.topscrollis = false;
						this.page++
						if (this.isdataScroll) {
							this.getContacts(chbattopscroll.scrollHeight)
						}
					}
				} else {
					chbattopscroll.scrollTop = chbattopscroll.scrollHeight;
				}
			},
			uploadClosefun() { // 上传文件取消
				this.uploadsjxqis = false;
			},
			downloadfun(src, name) {
				download(src, name)
			},
			recallfun(item) { //  撤回
				let sendData = {
					id: item.id
				};
				this.apifun.$post('/pc/im/undoMessage', sendData).then((res) => {
					// console.log(res)
					if (res.code == 200) {
						let datas = res.data;
						let ind = {}
						this.chatdata.map((it, index) => {
							if (item.id == it.id) {
								ind = {
									index: index,
									item: it
								}
							}
						})
						this.chatdata.splice(ind.index, 1);
					}
				})
			},
			quotefun(quotedata) { // 引用数据
				this.quotedata = quotedata;
				console.log(quotedata);
				this.isquote = true;
			}
		},
		watch: {
			appendMessagefun(res) { // 新消息 (fromUser:发送方信息)
				let data = res.data;
				this.newmsgdata = data;
				// if(res.type == 'simple'){  //条数测试失败
				// 	this.infodata.forEach((item,index)=>{
				// 		if(data.chat_sign == item.chat_sign){
				// 			if (this.chatsign == data.chat_sign) {
				// 				item.unread = 0
				// 			}else{
				// 				++item.unread
				// 			}
				// 		};
				// 	});
				// 	console.log(this.infodata)
				// }
				
				// 语音开始
				// if(data.type == 'webrtc'){
				// 	this.answer = data;
				// 	if(data.extends.event == 'busy' || data.extends.event == 'hangup'){

				// 	};
				// 	if(data.extends.event == 'calling'){
				// 		this.statustype = 2;
				// 		this.fvoiceis = true;
				// 	};
				// };
				// 语音结束
				// 公告STARt
				if (data.type == 'notice') {
					this.noticenum++;
					this.noticelastContent = data.lastContent;
				};
				// 公告END
				// 自动回复
				if (data.auto_reply == 1) { // 自己的自动回复
					setTimeout(() => {
						this.chatdata.push(data);
					}, 1000)
					return false;
				}
				// 自动回复END
				// 改变离线状态START
				if (res.type == 'isOnline') {
					let isOnlinemsg = res.data.login_status;
					this.infodata.forEach((item, index) => {
						if (item.from_user == res.data.id) {
							this.$set(item, 'login_status', isOnlinemsg);
						};
						if (this.infodataacitem.from_user == res.data.id) {
							this.infodataacitem.login_status = isOnlinemsg;
						}
					})
				};
				// 改变离线状态NED
				// 撤回消息START
				if(res.type == 'undoMessage'){
					let chatdata = this.chatdata;
					chatdata.forEach((item, index) => {
						let msg = chatdata[index];
						if (item.id == data.id) {
							chatdata[index] = Object.assign(msg, data);
						}
					})
					this.chatdata = chatdata;
				};
				// 撤回消息END
				
				// let contact = this.$refs.socket.getContact(toUser); // 废弃
				let contact = null;
				if (data.fromUser) {
					let toUser = data.fromUser.id;
					if (toUser == this.userInfo.user_id) { // 自己发的
						contact = data;
					};
					if (contact) { //自己发的；不用加新人；更新数据
						let addcontact = data;
						addcontact.lastContent = data.content;
						addcontact.lastSendTime = data.sendTime;
						addcontact.id = data.toContactId; // 发送方id
						this.updateContacts(addcontact);
					} else { // 不是自己发的
						let newContact = data;
						newContact.lastContent = data.content;
						newContact.lastSendTime = data.sendTime;
						newContact.sendTime = data.sendTime;
						newContact.avatar = data.fromUser.avatar;
						newContact.realname = data.fromUser.realname;
						newContact.email = data.fromUser.email;

						newContact.index = 'p';
						newContact.is_notice = 1; // 未知
						newContact.is_online = ''; // 未知
						newContact.is_top = 0; // 未知
						newContact.location = '中国';
						newContact.dep_id = 0;
						this.appendContacts(newContact);
					};
				}

				// 如果在后台运行,不是自己发的，并且开启了通知，就创建通知栏
				// if(data.fromUser.id != this.userInfo.user_id){

				// }
			},
		},
		computed: {
			wsStatus(){
				return this.$store.state.wsStatus
			},
			// ...mapState({  // 监听全局socket消息状态
			// 	wsStatus: state => state.wsStatus,
			// }),
			appendMessagefun() {
				return this.$store.state.appendMessage
			},
			infodata() {
				let index = 0; //0=所有  1=未读  2 -@我
				let contactList = [];
				contactList = this.contacts.filter((obj) => {
					return obj.lastContent || obj.role_id
				});
				let allunreadnum = 0;
				contactList.forEach((item) => {
					if (this.chatsign == item.chat_sign) {
						item.unread = 0
					}
					// console.log(item.unread)
					allunreadnum += item.unread;
				})
				this.$store.state.allunreadnum = allunreadnum;
				return contactList;
			}
		},
		filters: {
			sendTimeYMdhis(value) {
				return utils.date('y/m/d H:i:s', value);
			},
			sendTimeMd(value) {
				return utils.date('m/d', value);
			},
			getFileSize(value) {
				return utils.getFileSize(value)
			},
			chatSetLastContentfun(value) {
				return chatSetLastContent(value)
			}
		},
	}
</script>
<style>
	#information .infosearch-input .el-input__inner {
		background-color: #FFF6F1;
		height: 36px;
		line-height: 36px;
	}

	#information .infosearch-input .el-input__inner:focus {
		border-color: #FF5E03;
	}

	#sendphoto .el-dialog__body {
		padding: 0 20px 20px;
	}
</style>
<style scoped lang="scss">
	.information {
		position: relative;
		width: 200px;
		padding: 0 10px;
		height: 98vh;
		overflow-y: auto;
		border-right: 1px solid #EBEBEB;
	}

	.topfixed {
		position: sticky;
		z-index: 10;
		top: 0;
		left: 0;
		width: 200px;
		background-color: #fff;
	}

	// 搜索
	.infosearch {
		position: fixed;
		top: 0;
		z-index: 10;
		width: 190px;
		height: 44px;
		background-color: #fff;

		.infosearch-input {
			width: 190px;
			height: 38px;
			border: none;
			margin-top: 5px;
			background-color: #FFF6F1;
		}
	}

	// 消息列表
	.infoblock {
		padding-top: 40px;
		margin-top: 20px;
		.disconnect{
			// 断网
			width:190px;
			padding: 0 5px;
			height: 40px;
			line-height: 40px;
			font-size: 14px;
			border-radius:5px;
		}
		.infoeach {
			width: 190px;
			padding: 5px;
			margin-bottom: 20px;

			.infoeachl {
				position: relative;
				width: 39px;
				height: 39px;

				.infoeachl-p {
					width: 40px;
					height: 40px;
					border-radius: 5px;
				}

				.infoeachl-num {
					position: absolute;
					right: -2px;
					bottom: -2px;
					width: 12px;
					height: 12px;
					line-height: 12px;
					text-align: center;
					color: #fff;
					font-size: 10px;
					border-radius: 50%;
					border: 3px solid #fff;
				}
			}

			.infoeachr {
				flex: 1;
				margin-left: 10px;

				.infoeachr-name {
					line-height: 24px;
					font-size: 14px;
					color: #333333;
				}

				.infoeachr-msg {
					line-height: 16px;
					font-size: 12px;
					color: var(--mainColor);
				}
			}

			.infoeachtime {
				color: #999999;
				font-size: 12px;
				margin-top: 30px;
			}
		}

		.activeinfoeach {
			background-color: var(--mainColor);

			.infoeachr {
				.infoeachr-name {
					color: #fff;
				}

				.infoeachr-msg {
					color: #fff !important;
				}
			}
		}
	}

	// 右部信息部分
	.rblock {
		position: relative;
		flex: 1;
		z-index: 99;
	}

	.ointrtitle {
		width: 96%;
		padding: 0px 2% 10px;
		height: 40px;
		border-bottom: 1px solid #EEEEEE;
		color: #333333;
		font-size: 14px;
		background-color: #fff;

		.ointrtitle-name {
			line-height: 20px;
			font-size: 14px;
			color: #333;
			font-weight: bold;
		}

		.ointrtitle-status {
			line-height: 20px;

			.ointrtitle-statusd {
				width: 10px;
				height: 10px;
				margin-top: 5px;
				border-radius: 50%;
			}

			.ointrtitle-statusx {
				color: #FF5E03;
				font-size: 12px;
				margin-left: 5px;
			}
		}
	}

	.chbatblock {
		position: relative;
		width: 99%;
		height: 91vh;
		padding-top: 10px;
		justify-content: space-between;
	}

	.chbat {
		position: relative;
		flex: 1;

		.chbattop {
			width: 100%;
			height: 75vh;
			// min-height:74vh;
			// max-height:81vh;
			overflow-y: auto;
		}

		.chbatorder {
			position: sticky;
			top: 0;
			z-index: 10;
			width: 99%;
			background-color: var(--bgColor);
			border-radius: 10px;

			.chbatordert {
				width: 96%;
				padding: 0 2%;
				line-height: 40px;
				border-bottom: 1px solid #fff;
				justify-content: space-between;
				font-size: 14px;
			}

			.chbatorderb {
				width: 96%;
				padding: 10px 2%;

				.chbatorderbname {
					font-size: 14px;
					color: #333333;
					font-weight: bold;
				}

				.chbatorderbmsg {
					position: relative;
					font-size: 12px;
					color: #333333;
					justify-content: space-between;
					margin-top: 10px;

					.chbatorderbmsgtxt {
						width: 96%;
						line-height: 20px;
						color: #333333;
						font-size: 12px;
						max-height: 20px;
						overflow: hidden;
						transition-property: max-height;
						transition-duration: .6s;
					}

					.orderbshow {
						max-height: 350px;
						overflow-y: scroll;
					}

					.chbatorderbmsgicon {
						position: relative;
						width: 12px;
						height: 12px;
						margin-top: 5px;
						margin-left: 10px;
						text-align: center;
						line-height: 10px;
						color: #fff;
						font-size: 10px;
						padding: 1px;
						border-radius: 50%;

						span {
							position: absolute;
							left: 2px;
						}
					}
				}
			}
		}

		.chbatmsg {
			width: 100%;
			margin-top: 10px;
			position: relative;

			.chbatmsgeach {
				width: 100%;
				margin-bottom: 8px;

				// 右击
				.rightVisible {
					position: fixed;
					z-index: 10;
					width: 50px;
					border-radius: 8px;

					.rightVisibleeach {
						width: 50px;
						text-align: center;
						line-height: 24px;
						font-size: 12px;
						color: #333;
						background-color: #fff;
					}

					.rightVisibleeach:hover {
						background-color: #E6E6E6;
					}
				}

				.chbatmsgsj-sysmsg {
					line-height: 30px;
					padding: 0 10px;
					display: inline-block;
					margin: 10px auto;
					text-align: center;
					font-size: 14px;
					color: #333;
					background-color: #F4F4F4;
					border-radius: 10px;
				}

				.chbatmsghead {
					width: 35px;
					height: 35px;
					margin: 0 8px;

					.chbatmsgheadimg {
						width: 35px;
						height: 35px;
					}
				}

				.chbatmsgdata {
					position: relative;
					width: 60%;

					.chbatmsgsj-t {
						font-size: 12px;
						line-height: 20px;
						margin-bottom: 5px;

						.chbatmsgsj-ttime {
							color: #999;
						}
					}

					.chbatmsgsj-msg {
						max-width: 100%;
						display: inline-block;
						// padding:7px;
						// background-color:#F4F4F4;
						border-radius: 10px;
						line-height: 20px;

						.chbatmsgsj-text {
							font-size: 14px;
							color: #333333;
							line-height: 20px;
							margin-bottom: 5px;

							span {
								display: inline-block;
								padding: 7px;
								background-color: #F4F4F4;
								white-space: pre-wrap;  //只对中文起作用
								word-wrap: break-word;  // 只对英文起作用，以单词作为换行依据
								word-break: break-all;  // 只对英文起作用，以字母作文换行依据（长链接需要这个）
							}
						}

						.chbatmsgsj-image {
							max-width: 100%;
							height: auto;
							padding: 7px;
							background-color: #F4F4F4;
							margin-bottom: 5px;
							img {
								max-width: 100%;
								height: auto;
							}
						}

						.chbatmsgsj-Audio {
							position: relative;
							padding: 7px;
							background-color: #F4F4F4;
							margin-bottom: 5px;
							width: 100px;
							height: 20px;
							border-radius: 10px;

							.chbatmsgsj-Audiofile {
								position: absolute;
								z-index: 10;
								width: 100px;
								height: 20px;
							}

							.chbatmsgsj-Audioicon {
								width: 20px;
								height: 20px;

								.chbatmsgsj-Audioiconimg {
									width: 20px;
									height: 20px;
								}
							}

							.chbatmsgsj-Audiotxt {
								font-size: 14px;
								color: #333333;
								line-height: 20px;
								margin-left: 5px;
							}
						}

						.chbatmsgsj-file {
							padding: 7px;
							background-color: #F4F4F4;
							margin-bottom: 5px;
							width: 200px;
							padding: 9px;
							border: 1px solid var(--mainColor);
							border-radius: 10px;
							justify-content: space-between;

							.downfileicon {
								width: 34px;
								height: 34px;
								margin-top: 2px;

								img {
									width: 100%;
									height: 34px;
								}
							}

							.downfilemsg {
								width: 62%;

								.downfilemsgname {
									color: #777777;
									font-size: 14px;
									line-height: 20px;
								}

								.downfilemsg-rl {
									color: #777777;
									font-size: 10px;
									line-height: 20px;
								}
							}

							.downicon {
								font-size: 18px;
								line-height: 40px;
								color: #999999;
							}
						}
					}
				}
			}

			.chbatmsgl {
				position: relative;
				left: 0;
			}

			.chbatmsgr {
				position: relative;
				justify-content: flex-end;
			}
		}
	}

	.chbatsend {
		position: sticky;
		bottom: 0;
		width: 99%;
		padding: 8px 0;
		background-color: #F6F6F6;
		border-radius: 10px;

		.chbatsendt {
			position: relative;
			height: 25px;
			justify-content: space-between;

			// 表情部分 START
			.diaemojibgfg {
				position: fixed;
				left: 0;
				top: 0;
				z-index: 1;
				width: 100%;
				height: 100%;
				opacity: 0;
				background-color: red;
			}

			.diaemoji {
				position: absolute;
				z-index: 2010;
				bottom: 40px;
				left: -150px;
				z-index: 50;
				width: 500px;
				height: 300px;
				border-radius: 10px;
				background-color: #fff;
				box-shadow: 0 0 20px #cfd2d1;

				.diaemojit {
					width: 96%;
					height: 230px;
					padding: 10px 2%;
					border-top-right-radius: 10px;
					border-top-left-radius: 10px;

					.diaemojitmain {
						width: 100%;
						height: 230px;
						overflow-y: auto;

						.diaemojiticon-icon {
							display: inline-block;
							padding: 5px;
						}

						.diaemojiticon-icon:hover {
							background-color: #E6E6E6;
							border-radius: 5px;
						}

						.diaemojitphotoimage {
							display: flex;
							position: relative;
							width: 50px;
							height: 50px;
							margin: 5px;
							background-color: #E6E6E6;
							border-radius: 5px;

							.diaemojitphotoimage-upload {
								position: absolute;
								left: 0;
								top: 0;
								z-index: 1;
								width: 55px;
								height: 55px;
								display: flex;

								.diaemojitphotoimage-icon {
									position: absolute;
									left: 50%;
									top: 50%;
									margin-top: -11px;
									margin-left: -11px;
									font-size: 18px;
									color: #333;
								}
							}

							.diaemojitphotoimage-img {
								margin: auto;
								z-index: 2;
								max-width: 100%;
								max-height: 100%;
								border-radius: 5px;
							}
						}
					}
				}

				.diaemojib {
					position: absolute;
					bottom: 0;
					width: 96%;
					background-color: #fff;
					border-top: 1px solid #ccc;
					padding: 10px 2% 5px;
					height: 30px;
					line-height: 30px;
					border-bottom-left-radius: 10px;
					border-bottom-right-radius: 10px;

					.diaemojibeach {
						width: 30px;
						height: 30px;
						background-color: #fff;
						margin-left: 10px;
						border-radius: 5px;
						display: flex;

						img {
							margin: auto;
							width: 25px;
							height: 25px;
						}
					}

					.acdiaemojibeach {
						background-color: #E6E6E6;
					}
				}
			}

			// 删除
			.emoVisible {
				position: fixed;
				z-index: 10;
				width: 50px;
				border-radius: 8px;

				.emoVisibleeach {
					width: 50px;
					text-align: center;
					line-height: 24px;
					font-size: 12px;
					color: #333;
					background-color: #fff;
				}

				.emoVisibleeach:hover {
					background-color: #E6E6E6;
				}
			}

			// 表情部分 END

			.chbatsendtl {
				img {
					margin: 0 5px;
				}
			}

			.chbatsendtr {
				position: relative;
				margin-right: 10px;
				width: 130px;
				height: 25px;
				background-color: var(--bgColor);
				border-radius: 7px;
				padding: 0 9px;

				.chbatsendtr-z {
					font-size: 12px;
					color: #FFA878;
				}

				.chbatsendtr-s {
					position: absolute;
					top: 0;
					right: 0;
					width: 25px;
					height: 25px;
					background-color: var(--mainColor);
					border-radius: 7px;
					display: flex;

					.chbatsendtr-sp {
						margin: auto;
						width: 14px;
						height: 14px;
					}
				}
			}
		}

		.chbatsendb {
			.chbatsendbtxt {
				width: 96%;
				height: 70px;
				margin-top: 10px;
				padding: 10px 2%;
				border: none;
				outline: none;
				resize: none;
				background-color: #F6F6F6;
				color: #333;
				font-size: 14px;
			}
		}
	}

	// 弹窗
	.replacebtn {
		margin-top: 30px;
		display: flex;
		justify-content: flex-end;

		.replacebtneach {
			width: 130px;
			height: 50px;
			border-radius: 10px;
			color: #fff;
			font-size: 16px;
			margin-left: 25px;
		}
	}

	// 上传文件list
	.flielist {
		margin-top: 10px;

		.flieitem {
			justify-content: space-between;
			line-height: 30px;
			padding: 0 10px;
			border-radius: 5px;

			.flieiteml {
				.flieitemlicon {
					font-size: 16px;
				}

				.flieitemlname {
					font-size: 14px;
					margin-left: 8px;
				}
			}

			.flieitemr {
				width: 30px;
				text-align: center;
				font-size: 16px;
				color: #999;
				text-align: right;
			}
		}

		.flieitem:hover {
			background-color: #F7F7F7;
		}
	}

	// 上传图片
	.sepaypathinput {
		padding: 20px 0;

		.upload-demo {
			width: 240px;
			margin: auto;

			.sepaypathinputphoto {
				position: relative;
				width: 240px;
				height: 240px;
				background-color: #F6F6F6;
				border-radius: 10px;

				.sepaypathinputphotoicon {
					font-size: 40px;
					color: #999999;
				}

				.sepaypathinputphotoimg {
					position: absolute;
					top: 0;
					left: 0;
					z-index: 10;
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.videoclass {
		width: 450px;
		height: 400px;
	}
	// 引用
	.quote {
		margin-top: 8px;
		background-color:#F4F4F4;
		border-radius: 10px;
	}
	
	.quoteblockshow {
		position: absolute;
		z-index: 2010;
		bottom: 40px;
		left: 0px;
		z-index: 50;
		max-width: 200px;
		border-radius: 10px;
		background-color: #fff;
		box-shadow: 0 0 20px #cfd2d1;
	
		.quotebsclose {
			position: absolute;
			right: -6px;
			top: -5px;
			font-size: 20px;
			color: #bebfbf;
		}
	
		.quotebs {
			padding: 5px 10px;
			height: 30px;
			line-height: 30px;
			font-size: 14px;
			color: #333;
		}
	}
</style>